import { View, Text, StyleSheet, Pressable, TouchableOpacity } from "react-native"
import React, { useState } from "react"
import { colors, spacing } from "app/theme"
import { AntDesign } from "@expo/vector-icons"
import { MaterialIcons } from "@expo/vector-icons"
import { Menu, MenuItem, MenuDivider } from "react-native-material-menu"
import { scale } from "react-native-size-matters"

const HomeHeader = ({ selectedMenu, setSelectedMenu, onPressCalendar, givenDate }) => {
  const [visible, setVisible] = useState(false)

  const hideMenu = (item) => {
    setVisible(false)
    setSelectedMenu(item)
  }

  const showMenu = () => setVisible(true)

  const onRequestClose = () => setVisible(false)

  return (
    <View style={styles.container}>
      <TouchableOpacity
        disabled={selectedMenu == "week" || selectedMenu == "day" ? false : true}
        style={styles.calender}
        onPress={onPressCalendar}
      >
        <AntDesign name="calendar" size={24} color="white" />
      </TouchableOpacity>
      <View style={styles.dateButton}>
        <Text style={{ color: colors.black }}>{givenDate}</Text>
      </View>
      <Pressable onPress={showMenu}>
        <View style={styles.dropDown}>
          <Text style={{ color: colors.black }}>{selectedMenu}</Text>
          <MaterialIcons name="arrow-drop-down" size={24} color="black" />
        </View>
      </Pressable>
      <Menu visible={visible} onRequestClose={onRequestClose}>
        {["list", "day", "week"].map((item, index) => {
          return (
            <View key={index}>
              <MenuItem
                onPress={() => hideMenu(item)}
                textStyle={{ color: colors.black, fontSize: scale(15) }}
              >
                {item}
              </MenuItem>
              <MenuDivider />
            </View>
          )
        })}
      </Menu>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.lg,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  calender: {
    height: scale(44),
    width: scale(44),
    borderRadius: scale(22),
    backgroundColor: colors.icon,
    justifyContent: "center",
    alignItems: "center",
  },
  dateButton: {
    height: scale(36),
    borderRadius: scale(22),
    backgroundColor: colors.lightGrey2,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: spacing.md,
  },
  dropDown: {
    height: scale(36),
    borderRadius: 22,
    backgroundColor: "white",
    alignItems: "center",
    paddingHorizontal: spacing.lg,
    flexDirection: "row",
    borderColor: colors.icon,
    borderWidth: 1,
  },
})

export default HomeHeader
